<template>
  <div style="position: relative;">
    <div>
       <div class="ht-head-wrap">
        <div class="title-item"><router-link to="/ng-overall-view">全景农谷</router-link></div>
        <div class="title-item"><router-link to="/sx-famous">三品一标</router-link></div>
        <div class="title-item"><router-link to="/sx-digital-greatCause">数字农业</router-link></div>
        <div class="title-item title-item-active"><router-link to="/sx-technology">科技研发</router-link></div>
        <div class="title-item"><router-link to="/ng-remote-sensing">卫星遥感</router-link></div>
      </div>

      <div class="ht-content clear-float">
        <div class="content-left">
          <sx-tech-left></sx-tech-left>
        </div>
        <div class="content-middle">
          <sx-tech-middle></sx-tech-middle>
        </div>
        <div class="content-right">
          <sx-tech-right></sx-tech-right>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SxTechLeft from './sx-left/sx-tech-left.vue';
  import SxTechRight from './sx-right/sx-tech-right.vue';
  import SxTechMiddle from './sx-middle/sx-tech-middle.vue';

  export default {
    name:'sx-tech',
    components: {
      SxTechLeft,
      SxTechRight,
      SxTechMiddle
    },
    data() {
      return {

      }
    },
  }
</script>

<style scoped lang="scss" type="text/scss">
  .content-left {
    // background-color: red;
    left: 30px;
  }
  .content-right {
    // background-color: yellow;
    right: 30px;
  }
  .content-middle {
    // background-color: green;
  }
</style>
